<template>
	<div id="pagebar">
		<div id="previouspage" @click="preclick()">上一页</div>
		<div v-for="(item,index) in pagelist" 
			:key = "index" 
			:class="pageind == item ? 'showpage pnumber' : 'pnumber'" 
			@click="pageclick(item)"
			>
			{{item}}
		</div>
		<div id="nextpage" @click="nextclick()">下一页</div>
		<input id="pagedump" placeholder="" v-model="inputpage"/>
		<button id="pagebutton" @click="dumppage()">跳转</button>
		<span>共{{Totalpage}}页</span>
	</div>
</template>
<script>
	import config from '../../../config.js'
    export default {
        name: "pagebar",
        props: {
			
        },
        data() {
            return {
				pagelist:[],
				inputpage:'',
				localhost:config.localhost,
				port:config.port,
				Totalpage:10,
				pageind:1
            }
        },
		mounted() {
		   let that = this,
			   token = this.$root.token;
		   let api='http://'+this.localhost+':'+this.port+'/getpageinf';
		   //111111
		   this.$http.get(api,{params: {token:token,page:0}}).then((response)=>{
			that.Totalpage = response.body.blogsinf.page;
			console.log('that.Totalpage',that.Totalpage);
			let pagelist = [];
			let page = window.localStorage.getItem('page');
			that.pageind = page == undefined ? 1 : page;
			that.inputpage = that.pageind;
			console.log('page:',page,that.pageind,token);
			that.dumppage();
			if(this.pageind == 1){
				for(let i = 1; i <= this.Totalpage&&i <= 5;i++){
					pagelist.push(i);
				}
				this.pagelist = pagelist;
			}
		   },function(err){
			console.log(err);
		   })
			// console.log('mounted',this.Totalpage);		   
		},
        methods: {
			getblogs(ind){
				console.log('子组件getblogs',ind);
				this.$emit('getblogs',ind);
			},
			pageclick(ind){
				this.pageind = ind;
				this.getblogs(ind);
			},
			nextclick(){
				let pageind = this.pageind;
				if(pageind == this.Totalpage) return;
				pageind = pageind + 1;
				if(this.pagelist.indexOf(pageind) == -1){
					let pagelist = this.pagelist;
					pagelist.shift();
					pagelist.push(pageind);
					this.pagelist = pagelist;
				}
				this.pageind = pageind;
				this.getblogs(pageind);
			},
			preclick(){
				let pageind = this.pageind;
				if(pageind == 1) return;
				pageind = pageind - 1;
				if(this.pagelist.indexOf(pageind) == -1){
					let pagelist = this.pagelist;
					pagelist.pop();
					pagelist.unshift(pageind);
					this.pagelist = pagelist;
				}
				this.pageind = pageind;
				this.getblogs(pageind);
			},
			dumppage(){
				let jp = parseInt(this.inputpage);
				if(jp > this.Totalpage || jp <= 0) return;
				if(this.pagelist.indexOf(jp) == -1){
					if(jp < this.Totalpage - 2 && jp > 2){
						let pagelist = [];
						for(let i = - 2;i <= 2; i++){
							pagelist.push(i + jp);
						}
						this.pagelist = pagelist;
					}else if(jp < this.Totalpage - 2){
						let pagelist = [];
						for(let i = 1;i <= 5 && i < this.Totalpage; i++){
							pagelist.push(i);
						}
						this.pagelist = pagelist;
					}else{
						let pagelist = [];
						for(let i = this.Totalpage;i > 0 && i >= this.Totalpage - 5; i--){
							pagelist.unshift(i);
						}
						this.pagelist = pagelist;
					}
				}
				this.pageind = jp;
				this.inputpage = '';
				this.getblogs(jp);
			}
        }
    }
</script>

<style scoped>
	#pagebar{
		display: flex;
		flex-direction: row;
		text-align: center;
		margin-top: 0.625rem;
		padding-bottom: 0.5rem;
	}
	#pagebar #previouspage{
		margin-left: 20%;
	}
	#pagebar div{
		margin-right:3% ;
		cursor: default;
	}
	#pagebar .pnumber{
		width: 3%;
		/* border: #000000 1px solid; */
	}
	.showpage{
		color: coral;
	}
	#pagedump{
		margin-left: 3%;
		width: 5%;
	}
	#pagebutton{
		margin-left: 1%;
		margin-right: 1%;
	}
	
	@media screen and (max-width:980px ) {
	 #pagebar #previouspage{
		margin-left: 0; 
	 }
	}
</style>

